<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">主子表Demo</block></cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<view :hidden="TabCur==1">
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">单行文本</view>
				<input placeholder="请输入内容" name="input" v-model="testInput"></input>
			</view>
			<view class="cu-form-group align-start" :hidden="textareaShow == false">
				<view class="title">文本框</view>
				<textarea v-model="testTextarea" maxlength="-1" placeholder="多行文本输入框"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">单选</view>
				<js-radio dict="sys_menu_type" v-model="testRadio"></js-radio>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">多选</view>
			</view>
			<view>
				<js-checkbox dict="sys_menu_type" v-model="testCheckbox"></js-checkbox>
			</view>
			<view class="cu-form-group" @tap="toggleTab('dateTime')">
				<view class="title">日期选择 : </view>
				<input placeholder="" name="input" v-model="testDate" disabled="true"></input>
				<text class='cuIcon-time text-green'></text>
				<w-picker
					mode="dateTime" 
					startYear="2017" 
					endYear="2030"
					step="1"
					:defaultVal="testDate" 
					:current="false" 
					@confirm="onConfirm"
					ref="dateTime" 
					themeColor="#f00"
				></w-picker>
			</view>
			<view class="cu-form-group align-start" @click="showUser">
				<view class="title">用户选择 : {{user.userName || ''}} {{user.userCode || ''}}</view>
			</view>
			<view class="cu-form-group align-start" @click="showOrg">
				<view class="title">组织机构选择 : {{org.name || ''}} {{org.code || ''}}</view>
				
			</view>	
			<view class="cu-form-group" @tap="toggleTab('region')">
				<view class="title">地址选择</view>
				<input placeholder="" name="input" v-model="regionStr" disabled="true"></input>
				<text class='cuIcon-locationfill text-orange'></text>
				<w-picker
					mode="region"
					:defaultVal="regionDval"
					:areaCode="['33','3301','330108']"
					:hideArea="false"
					@confirm="onConfirm" 
					ref="region"
					:timeout="true"
				></w-picker>
			</view>
			<js-images @addOrDel="addOrDelImage" bizType="testData_image"></js-images>
			<js-file @addOrDel="addOrDelFile" bizType="testData_image"></js-file>
			<view ref="input" class="input"></view>
		</form>
		</view>
		<button class="bg-blue" @click="save">保存</button>
		<!--下面放底部弹出类-->
		<tki-tree ref="userTree" @cancel="textareaShow = true" @treeCallBack="fconfirm" type="user" confirmColor="#f5a200" range-key="label" title="用户选择" titleColor="#f5a200" url="/a/sys/office/treeData?isLoadUser=true"/>
		<tki-tree ref="orgTree" @cancel="textareaShow = true" @treeCallBack="fconfirm" confirmColor="#f5a200" type="org" range-key="label" title="组织机构选择" titleColor="#f5a200" url="/a/sys/office/treeData"/>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import {dateUtils} from '../../../common/js/util.js'
	export default {
		data() {
			return {
				tabNav: ['主表', '子表'],
				TabCur: 0,
				CustomBar: this.CustomBar,
				treeData:[],
				// 解决textarea层级过高的问题
				textareaShow:true,
				// 解决picker当前是哪一个
				mode:"",
				// 表单需要的数据
				testInput:"",
				testTextarea:"",
				testRadio:"",
				testCheckbox:"",
				testDate: dateUtils.getCurrentDateTime(),
				user:{},
				org:{},
				region: ['广东省', '广州市', '海珠区'],
				testData_image:"",
				testData_image_del:"",
				testData_file:"",
				testData_file_del:""
			};
		},
		computed:{
			// 地址用空格隔开
			regionStr(){
				return this.region.join(" ");
			}
		},
		methods: {
			...mapActions(["JAjax"]),
			// 触发日期选择和地址选择弹出
			toggleTab(str){
				this.mode = str;
				this.$refs[str].show();
				
			},
			// 日期时间和地址确定选择
			onConfirm(value){
				console.log(this.mode)
				if(this.mode == "dateTime"){
					this.testDate = value.result;
				}
				if(this.mode == "region"){
					this.region = value.checkArr;
				}
			},
			addOrDelImage(val){
				this.testData_image = val.normal.join(",");
				this.testData_image_del = val.del.join(",");
			},
			addOrDelFile(val){
				this.testData_file = val.normal.join(",");
				this.testData_file_del = val.del.join(",");
			},
			// 主子表选择
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			
			// 用户弹出框
			showUser(){
				this.textareaShow = false;
				this.$refs.userTree._show()
			},
			// 组织机构弹出框
			showOrg(){
				this.textareaShow = false;
				this.$refs.orgTree._show()
			},
			// 树确定
			fconfirm(arr){
				this.textareaShow = true;
				if(arr.type == 'user'){
					this.$set(this.user,'userName',arr[0].label);
					this.$set(this.user,'userCode',arr[0].id.replace("u_",""));
				}
				if(arr.type == 'org'){
					this.$set(this.org,'name',arr[0].label);
					this.$set(this.org,'code',arr[0].id.replace("u_",""));
				}
			},
			// 保存
			save(){
				uni.showLoading({
					title: '保存中',
					mask: false
				});
				let submitData = {};
				submitData["testInput"] = this.testInput;
				submitData["testTextarea"] = this.testTextarea;
				submitData["testRadio"] = this.testRadio;
				submitData["testCheckbox"] = this.testCheckbox;
				submitData["testDatetime"] = this.testDate;
				submitData["testUser.userName"] = this.user.userName || "";
				submitData["testUser.userCode"] = this.user.userCode || "";
				submitData["testOffice.officeName"] = this.org.name || "";
				submitData["testOffice.officeCode"] = this.org.code || "";
				submitData["testAreaName"] = this.regionStr;
				submitData["testData_image"] = this.testData_image;
				submitData["testData_image_del"] = this.testData_image_del;
				submitData["testData_file"] = this.testData_file;
				submitData["testData_file_del"] = this.testData_file_del;
				this.JAjax({
					url: '/a/test/testData/save',
					data:submitData,
					header:{
					"content-type": "application/x-www-form-urlencoded"
					},
					method: "POST",
					success: data => {
						uni.hideLoading()
						if(data.data.result == "true"){
							uni.navigateBack({
								delta:1
							})
						} else {
							uni.showToast({
								title: data.data.message,
								icon:"none"
							});
						}
					}
				});
			}
		}
	}
</script>
<style>
</style>